<template>
 <van-nav-bar
    title="订单详情页"
    left-text="返回"
    left-arrow
    @click-left="$router.go(-1)"
  ></van-nav-bar>
  <van-steps :active="active">
    <van-step>待付款</van-step>
    <van-step>待发货</van-step>
    <van-step>待收货</van-step>
    <van-step>待评价</van-step>
    <van-step>已完成</van-step>
  </van-steps>
  <div class="container">
    <!-- 1 地址区域 -->
    <div class="address-card" @click="triggerPopup">
      <p class="info">
        <span class="username" v-text="orderDetail.real_name"></span>
        <span v-text="orderDetail.user_phone"></span>
      </p>
      <p class="detail">
        <span v-text="orderDetail.user_address"></span>
      </p>
    </div>
    <!-- 2 商品区域 -->
    <p class="total">共一件商品</p>
    <div class="product-card"
      v-for="item in orderDetail.cartInfo"
      :key="item.id"
    >
      <img :src="item.productInfo.image" alt="">
      <div class="text">
        <p class="name" v-text="item.productInfo.store_name"> </p> <i>x1</i>
        <p class="money">￥{{  item.truePrice }}</p>
      </div>
    </div>
    <!-- 订单编号 时间 支付方式 -->
    <div class="wrapper">
      <van-cell title="订单号：" :value="orderId"  />
      <van-cell title="下单时间：" :value="orderDetail._add_time"  />
      <van-cell title="支付状态：" :value="orderDetail._status._title"  />
      <van-cell title="支付方式：" :value="orderDetail._status._payType"  />
      <van-cell title="商品总价：" :value="orderDetail.pay_price"  />
    </div>
  </div>
  <van-submit-bar
    label="实付款"
    :price="totalPrice"
    button-text="立即付款"
    @submit="onSubmit" />
</template>

<script setup>
import { getOrderDetails } from '@/api/order'
import { computed, ref } from '@vue/reactivity'

// 接收订单 ID
const { orderId } = defineProps({
  orderId: {
    type: String,
    required: true
  }
})
// 实际付款金额
const totalPrice = computed(()  => orderDetail.value.total_price * 100)
const orderDetail = ref({})
const initOrderDetails = async (orderId) => {
  const { data } = await getOrderDetails(orderId)
  if (data.status !== 200) { return }
  orderDetail.value = data.data
}
initOrderDetails(orderId)



</script>

<style lang="scss" scoped>
.container {
    // 地址卡片
    .address-card {
      padding: 20px 15px;
      font-size: 16px;
      position: relative;

      &::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 2px;
        background: repeating-linear-gradient(90deg, #ff6c6c 0, #ff6c6c 20%, transparent 20%, transparent 25%, #0084ff 25%, #0084ff 45%, transparent 45%, transparent 50%,);
        background-size: 80px;
      }

      .info {
        span:first-child {
          padding-right: 20px;
        }
      }

      .detail {
        padding-top: 5px;
      }
    }

    .total {
      width: 100%;
      height: 47px;
      padding: 0 16px;
      border-bottom: 1px solid #f0f0f0;
      font-size: 16px;
      color: #282828;
      line-height: 47px;
      box-sizing: border-box;
    }

    .product-card {
      margin: 16px 0 0 16px ;
      padding-right: 16px;
      border-bottom: 1px solid #f0f0f0;
      height: 99px;
      display: flex;

      img {
        width: 71px;
        height: 71px;
      }

      .text {
        position: relative;
        font-size: 14px;
        .name{
          display: -webkit-box;
          -webkit-box-orient: vertical;
          overflow: hidden;
          -webkit-line-clamp: 1;
          margin: 5px 0 15px;-size: 15px;
          color: #282828;
          width: 250px;
        }

        i {
          position: absolute;
          top: 5px;
          right: -10px;
        }

        .money {
          color: #5500f7!important
        }
      }
    }

    .wrapper {
      margin-bottom: 50px;
    }
 
  }
</style>